<template>
  <div class="app-container">
    <div class="header">
      <div>1号无人机实时视频</div>
      <div style="font-size: 14px">2024-10-29 18:20:30</div>
    </div>
    <div class="content">
      <img class="img" src="@/assets/images/bg.jpg" alt="">
      <div class="info">
        <div>无人机状态：正常</div>
        <div>无人机电量：80%</div>
        <div>图传信号：-</div>
        <div>RTK信号：-</div>
        <div>飞行高度：120米</div>
        <div>飞行速度：30公里/小时</div>
      </div>
    </div>
    <el-button type="primary" size="small" style="margin-top: 10px;" @click="$router.back()">
      返回
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Monitoring',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    background: rgba(48, 65, 86, 0.8);
    padding: 8px 15px;
    border-radius: 4px;
    color: #fff;
  }

  .content {
    width: 100%;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }

    .info {
      position: absolute;
      left: 20px;
      top: 20px;
      background: rgba(24, 144, 255, 0.6);
      border-radius: 10px;
      padding: 10px 20px;

      div {
        font-size: 14px;
        color: #fff;
        line-height: 34px;
      }
    }
  }
}
</style>
